<template>
  <view>
    <view class="price-block">
      <v-image
        height="143rpx"
        width="100vw"
        oss-src="landing-page-background.png"
      />
      <view class="price-block-content">
        <view class="product-price">
          <v-price
            size="60rpx"
            sign-size="32rpx"
            decimal-size="48rpx"
            color="#ffffff"
            :sig-bold="false"
            :decimal-bold="false"
            :price="displayPrice"
          />
          <view class="label">
            起
          </view>
          <view v-if="minSku.market_price" class="market-price">
            {{ `¥${minSku.market_price.toFixed(2)}` }}
          </view>
        </view>
        <view v-if="time !== undefined" class="count-down-block">
          <v-image
            src="@/static/icons/landing-page-count-down-header.svg"
            height="32rpx"
            width="122rpx"
          />
          <wd-count-down :time="time" @finish="updateTime">
            <template #default="{ current }">
              <view class="count-down-container">
                <view class="count-down">
                  {{ parseTime(current.hours) }}
                </view>
                <view class="count-down-colon">
                  :
                </view>
                <view class="count-down">
                  {{ parseTime(current.minutes) }}
                </view>
                <view class="count-down-colon">
                  :
                </view>
                <view class="count-down">
                  {{ parseTime(current.seconds) }}
                </view>
              </view>
            </template>
          </wd-count-down>
        </view>
      </view>
    </view>
    <view class="product-info">
      <view class="product-sales-info">
        <view class="highlight">
          {{ component.label }}
        </view>
        <view
          v-if="component.sales_volume_type === 'SALES_VOLUME_CUSTOMIZE'"
          class="product-saled-count"
        >
          {{ `已售：${component.custom_sales_volume}` }}
        </view>
        <view
          v-else-if="
            component.sales_volume_type === 'SALES_VOLUME' &&
              landingPageData.page_summary?.total_sale
          "
          class="product-saled-count"
        >
          {{ `已售：${landingPageData.page_summary.total_sale}` }}
        </view>
      </view>
      <view class="product-name">
        <view v-if="component.prime_flag" class="tag prime">
          精品
        </view>
        <view v-if="component.hot_selling_flag" class="tag hot-selling">
          热卖
        </view>
        <view v-if="component.new_arrival_flag" class="tag new-arrival">
          新品
        </view>
        <text>
          {{ component.name }}
        </text>
      </view>
    </view>
    <view class="product-info-block">
      <view
        v-if="component.guarantee_status && guaranteeText"
        class="product-info-safe-buy"
        @click="$emit('show-guarantee')"
      >
        <v-image
          height="34rpx"
          width="90rpx"
          src="@/static/icons/landing-page-safe-buy.svg"
        />
        <view class="divider" />
        <view class="quote-text">
          {{ guaranteeText.join('·') }}
        </view>
        <wd-icon name="arrow-right" size="28rpx" color="#2cae26" />
      </view>

      <view v-if="component.rest_assured" class="product-info-quote">
        <view class="quote-tag">
          放心购
        </view>
        <view class="quote-item">
          {{ component.rest_assured }}
        </view>
      </view>

      <view
        v-if="product.sku_type === 'MULTI'"
        class="product-info-item"
        @click="$emit('to-spec')"
      >
        <view class="label">
          选择
        </view>
        <view class="product-sku-list">
          <view class="image-wrapper">
            <v-image
              v-for="sku in product.sku_list"
              :key="sku.id"
              height="50rpx"
              width="50rpx"
              border-radius="4rpx"
              :src="sku.image"
              mode="aspectFill"
            />
          </view>
          <view class="sku-text">
            {{ `共${product.sku_list.length}种` }}
          </view>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>

      <view class="delivery-info">
        <v-icon size="32rpx" src="@/static/icons/landing-page-delivery.svg" />
        <view class="tag">
          <v-icon
            size="24rpx"
            src="@/static/icons/landing-page-delivery-clock.svg"
          />
          <view class="text">
            {{ deliveryText }}
          </view>
        </view>
        <view class="value">
          {{ `发货时间: ${deliveryText}` }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: SpuVO;
  landingPageData: AdLandingPageVO;
  component: LandingPageGoodsItem;
  discountPrice: number;
}>();

defineEmits<{
  'show-guarantee': [];
  'to-spec': [];
}>();

const landingStore = $store.landing();
const displayPrice = computed(() =>
  Math.max(
    0,
    minSku.value.sell_price -
      (landingStore.isShowPopup ? 0 : props.discountPrice)
  )
);

const minSku = computed(() => {
  const skuList = props.product.sku_list;
  return skuList.reduce((prev, current) => {
    return prev.sell_price < current.sell_price ? prev : current;
  });
});

const guaranteeText = computed(() => {
  const list: string[] = [];
  const guarantees = props.component.guarantee_content?.guarantees;
  if (guarantees?.includes(1)) list.push('交易保障');
  if (guarantees?.includes(2)) list.push('消费者保障');
  if (guarantees?.includes(3)) list.push('破损补偿');
  if (guarantees?.includes(4)) list.push('七天无理由退货');
  if (guarantees?.includes(5)) list.push('正品保障');
  if (guarantees?.includes(6)) list.push('假一赔十');
  return list;
});

const time = ref<number>();
const updateTime = () => {
  const current = Date.now();
  const activeTime = props.component?.activity_time;
  let total = (activeTime?.day ?? 0) * 24 * 60 * 60 * 1000;
  total += (activeTime?.hour ?? 0) * 60 * 60 * 1000;
  total += (activeTime?.minute ?? 0) * 60 * 1000;
  total += (activeTime?.second ?? 0) * 1000;
  if (total !== 0) {
    time.value = total - (current % total);
  } else {
    time.value = undefined;
  }
};
onMounted(() => {
  updateTime();
});

const parseTime = (time: number) => {
  return time < 10 ? `0${time}` : time;
};
const deliveryText = computed(() => {
  switch (props.component.guarantee_content?.time_options) {
    case 1:
      return '当天发货';
    case 2:
      return '24小时发货';
    case 3:
      return '48小时发货';
    case 4:
      return '72小时发货';
    default:
      return '';
  }
});
</script>

<style lang="scss" scoped>
.price-block {
  height: 119rpx;
  overflow: hidden;
  width: 100vw;
  position: relative;
  .price-block-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    .product-price {
      display: flex;
      align-items: baseline;
      color: white;
      gap: 0 8rpx;
      .label {
        font-size: 32rpx;
      }
      .market-price {
        font-size: 26rpx;
        opacity: 50%;
        text-decoration: line-through;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }
    }
    .count-down-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
    }
    .count-down-container {
      display: flex;
      align-items: center;
      height: 48rpx;
      line-height: 48rpx;
    }
    .count-down {
      height: 48rpx;
      line-height: 48rpx;
      width: 48rpx;
      border-radius: 4rpx;
      font-weight: bold;
      color: white;
      background: #313032;
      text-align: center;
    }
    .count-down-colon {
      height: 48rpx;
      line-height: 48rpx;
      font-weight: bolder;
      color: #313032;
      margin: 0 8rpx;
    }
  }
}
.product-info {
  position: relative;
  padding: 24rpx 32rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16rpx;

  .product-sales-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    .highlight {
      color: #ff2f3b;
    }
    .product-saled-count {
      color: #999999;
    }
  }

  .product-name {
    font-size: 36rpx;
    font-weight: bold;
    line-height: 1.5;
    padding: 8rpx 0;
    .tag {
      display: inline-flex;
      margin-right: 8rpx;
      margin-bottom: 3rpx;
      height: 36rpx;
      line-height: 36rpx;
      align-items: center;
      justify-content: center;
      color: white;
      white-space: nowrap;
      font-size: 24rpx;
      font-weight: normal;
      width: 60rpx;
      border-radius: 6rpx;
      vertical-align: middle;
      &.prime {
        background: linear-gradient(90deg, #ab6a12, #402302);
      }
      &.hot-selling {
        background: linear-gradient(90deg, #fc7529, #e92d00);
      }
      &.new-arrival {
        background: linear-gradient(90deg, #62d60d, #13ad5b);
      }
    }
  }
}
.product-info-block {
  position: relative;
  padding: 24rpx;
  margin: 0 24rpx;
  background-color: white;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24rpx;
  font-size: 28rpx;

  .product-info-safe-buy {
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 20rpx;
    border-radius: 12rpx;
    background: #eefaee;
    display: flex;
    align-items: center;
    gap: 0 16rpx;
    color: #2d8e27;
    .divider {
      width: 1px;
      height: 26rpx;
      background-color: #2cae26;
    }
    .quote-text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
}

.product-info-quote {
  line-height: 74rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  border: 2px solid #efd6c1;
  border-radius: 12rpx;
  background: #fceadc;
  display: flex;
  align-items: baseline;
  gap: 0 16rpx;
  color: #b88953;
  .quote-tag {
    line-height: 44rpx;
    font-weight: bold;
    color: white;
    padding: 0 8rpx;
    border-radius: 4rpx;
    background-color: #b88953;
  }
}

.product-info-item {
  height: 50rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  .label {
    color: #666666;
    flex-shrink: 0;
  }
  .product-sku-list {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16rpx;
    .image-wrapper {
      overflow: hidden;
      display: flex;
      gap: 16rpx;
    }
    .sku-text {
      flex-shrink: 0;
      background-color: #f5f6fa;
      border-radius: 4rpx;
      padding: 0 8rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      font-size: 26rpx;
      line-height: 36rpx;
      color: #999999;
    }
  }
  .product-info-content {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
}

.delivery-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
  .tag {
    padding: 0 8rpx;
    display: flex;
    gap: 0 4rpx;
    align-items: center;
    line-height: 32rpx;
    font-size: 24rpx;
    font-weight: 300;
    border-radius: 4rpx;
    background: #2ebc97;
    color: white;
  }
}
</style>
